
<style lang="less">
	page{
		background-color: #F7F7F7;
		padding-bottom: 50upx;
	}
	.container{
		padding-top: 30upx;
	}
	.head{
		background-color: #FFFFFF;
		padding: 28upx 100upx 28upx 28upx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.head_fr_fans{
			font-size: 20upx;
			font-weight: bold;
			color: #333333;
			line-height: 36upx;
		}
	}
	.head_fl{
		flex: 1;
		display: flex;
		align-items: center;
		.head_fl_img{
			width: 66upx;
			height: 66upx;
			border-radius: 50%;
			margin-right: 16upx;
		}
		.name{
			font-size: 24upx;
			font-weight: bold;
			color: #333333;
			line-height: 24upx;
			margin-bottom: 6upx;
		}
		.grade{
			display: inline-block;
			font-size: 18upx;
			font-weight: 500;
			color: #DBC291;
			line-height: 18upx;
			padding: 6upx 14upx;
			background: #322F2C;
			border-radius: 15upx;
		}
	}
	.store{
		margin-top: 20upx;
		background-color: #FFFFFF;
		padding: 30upx;
		box-sizing: border-box;
		.store_name{
			text-align: center;
			font-size: 34upx;
			font-weight: bold;
			color: #333333;
			line-height: 34upx;
		}
		.store_day{
			text-align: center;
			margin: 20upx 0;
			font-size: 24upx;
			font-weight: 500;
			color: #333333;
			line-height: 36upx;
		}
		
		.store_earnings{
			padding: 0 30upx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.line{
				width: 2upx;
				height: 30upx;
				background: #D4D4D4
			}
			
		}
	}
	.store_earnings_fl{
		font-size: 28upx;
		font-weight: bold;
		color: #333333;
		line-height: 36upx;
	}
	.price{
		font-size: 32upx;
		font-family: "DINCond";
		font-weight: 400;
		color: #333333;
		line-height: 38upx;
	}
	.store_main{
		margin-top: 32upx;
		.store_title{
			width: 100%;
			height: 80upx;
			background: #F7F7F7;
			display: flex;
			align-items: center;
		}
		
		.ranking{
			text-align: center;
			width: 20%;
		}
		.storeName{
			text-align: center;
			width: 40%;
		}
		.earnings{
			text-align: center;
			width: 40%;
		}
	}
	.store_list{
		display: flex;
		align-items: center;
		border: 1px solid #EDEDED;
		padding: 28upx 0;
		.store_title_txt{
			font-size: 28upx;
			font-weight: 500;
			color: #333333;
			line-height: 28upx;
		}
		.stire_btn{
			display: inline-block;
			width: 134upx;
			height: 54upx;
			background: #070506;
			border-radius: 27upx;
			font-size: 24upx;
			font-weight: 500;
			color: #FEFEFE;
			line-height: 54upx;
			text-align: center;
		}
		.one{
			background: url("https://xpandago.oss-cn-shanghai.aliyuncs.com/applet/first_icon.png") no-repeat center center / 54upx 54upx;
		}
		.two{
			background: url("https://xpandago.oss-cn-shanghai.aliyuncs.com/applet/second_icon.png") no-repeat center center / 54upx 54upx;
		}
		.three{
			background: url("https://xpandago.oss-cn-shanghai.aliyuncs.com/applet/third_icon.png") no-repeat center center / 54upx 54upx;
		}
	}
	
</style>


<template>

	<view class="container">
		<view class="head">
			<view class="head_fl">
				<image :src="http + obj.logo" class="head_fl_img" mode="widthFix" v-if="obj.logo != '' && obj.logo != null"></image>
				<image src="https://static.xpandago.net/wechat/images/logo.png?x-oss-process=style/face-middle" v-else class="head_fl_img" mode="widthFix"></image>
				<view class="head_text">
					<view class="name">{{obj.shopName}}</view>
					<view class="grade">{{obj.shopTypeStr}}</view>
				</view>
			</view>
			<view class="head_fr">
				<view class="head_fr_fans">店铺数：{{obj.shopNum}}</view>
				<view class="head_fr_fans">粉丝数：{{obj.fansNum}}</view>
			</view>
		</view>
		<view class="store">
			<view class="store_name">店铺排行</view>
			<view class="store_day">（最近{{rangeDay}}天）</view>
			<view class="store_earnings">
				<view class="store_earnings_fl">{{titleOne}}：<text class="price" v-if="ind == 1 || ind == 2 || ind == 5 || ind == 9">¥ {{obj.data}}</text><text class="price" v-else>{{obj.data}}</text></view>
				<view class="line"></view>
				<view class="store_earnings_fl">个人排行：{{obj.rank}}</view>
			</view>
			<view class="store_main">
				<view class="store_title">
					<view class="ranking store_earnings_fl">名次</view>
					<view class="storeName store_earnings_fl">店铺名称</view>
					<view class="earnings store_earnings_fl">{{titleTwo}}</view>
				</view>
				<view class="store_list" v-for="(v,i) in obj.shopList" :key="i">
					<view :class="['ranking','price',i == 0 ? 'one':'',i == 1 ? 'two':'',i == 2 ? 'three':'']">{{v.rank}}</view>
					<view class="storeName store_title_txt">{{v.shopName}}</view>
					<view class="earnings" v-if="ind == 9"><text class="stire_btn" @tap="openUrl('/pages/newData/brandSales?shopUserId=' + v.shopUserId)">查看数据</text></view>
					<view class="earnings price" v-else-if="ind == 1 || ind == 2 || ind == 5 || ind == 9">¥ {{v.data}}</view>
					<view class="earnings store_title_txt" v-else>{{v.data}}</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import api from '@/common/api';
  export default {

    components: {},

    data () {
      return {
		obj:{},
		rangeDay:0,
		ind:0,
		titleOne:'',
		titleTwo:'',
		token:'',
		http:api.httpImg,
	  }
    },
	onLoad(options){
		// console.log(options)
		if(Boolean(options.index) != false){
			this.ind = options.index
			let result = ''
			if(options.index == 1){
				result = '销售收益'
			}else if(options.index == 2){
				result = '销售金额'
			}else if(options.index == 3){
				result = '销售件数'
			}else if(options.index == 4){
				result = '销售单数'
			}else if(options.index == 5){
				result = '退款金额'
			}else if(options.index == 6){
				result = '退款件数'
			}else if(options.index == 7){
				result = '注册用户数'
			}else if(options.index == 8){
				result = '下单用户数'
			}else if(options.index == 9){
				uni.setNavigationBarTitle({
				　　title: '商品分析'
				})
				this.ind = options.index
				this.titleOne = '累计销售金额'
				this.titleTwo = '详细数据'
				this.rangeDay = options.rangeDay
				this.token = uni.getStorageSync('token')
				this.newDataDetail()
				return false
			}
			uni.setNavigationBarTitle({
			　　title: result
			})
			this.titleOne = result
			this.titleTwo = result
		}
		this.rangeDay = options.rangeDay
		this.token = uni.getStorageSync('token')
		this.newDataDetail()
	},
    methods: {
		openUrl(url){
			uni.navigateTo({
				url:url
			})
		},
		async newDataDetail(){
			const [err, res] = await api.newDataDetail({
				query:{
					rangeDay:this.rangeDay,
					dataType:this.ind,
				},
				header:{
					'token': this.token
				}
			 });
			 if(res.data.code == 0){
				 this.obj = res.data.data
			}else{
				uni.showToast({
					title: res.data.msg,
					icon: 'none'
				 })
			}
		},
	},

  }
</script>